const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require("path");


module.exports = {
    entry:['./src/index.js','./src/index.html'],
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build'),
    },
    module:{
        rules:[
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(webp,jepg,png$)/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    esModule:false,
                    outputPath:'media'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|css|less|html|webp|png|jpeg)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]',
                    outputPath:'js'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'production',
    devServer:{
        static : {directory: resolve(__dirname,'build')},
        watchFiles:['./src/index.html'],
        //启动gzip压缩
        compress:true,
        port:3000,
        //自动打开默认浏览器
        open:true,
        //开启HMR功能
        //当修改了webpack配置， 必须重启webpack服务
        hot:true
    },
    /**
     * source-map :一种提供源代码到构建后代码映射技术(如果构建后代码出错了，通过映射
     * 可以追踪源代码错误)
     * 
     * source-map:外部
     *  错误代码准确信息 和 源代码的错误位置
     * inline-source-map:内联
     *  只生成一个内联source-map
     *  错误代码准确信息 和 源代码的错误位置
     * hidden-source-map:外部
     *  错误代码错误原因，但是没有错误位置
     *  不能追踪源代码错误，只能提示到构建后代码的错误位置
     * eval-source-map:内联
     *  每一个文件都生成对应的source-map，都在eval
     *  错误代码准确信息 和 源代码的错误位置
     * nosources-source-map:外部
     *  错误代码准确信息，但是没有任何源代码信息
     * cheap-source-map:外部
     *  错误代码准确信息 和 源代码的错误位置
     *  只能精确到行
     * cheap-module-source-map:外部
     *  错误代码准确信息 和 源代码的错误位置
     *  module会将loader的source map加入
     * 
     * 内联和外部的区别：1.外部生成了文件，内联没有；2.内联构建速度更快
     * 
     * 开发环境：速度快，调试更友好
     *  速度快(eval>inline>cheap>...)
     *     eval-cheap-source-map
     *     eval-source-map
     *  调试更友好
     *     source-map
     *     cheap-module-source-map
     *     cheap-source-map
     * -->eval-source-map / eval-cheap-module-source-map
     * 
     * 生产环境：源代码要不要隐藏？调试要不要更友好
     *  内联会让代码体积更大，所以再生产环境下不用内联
     *  nosources-source-map 全部隐藏
     *  hidden-source-map 只隐藏源代码，会提示构建后的代码错误信息
     * 
     * -->source-map / cheap-module-source-map
     */
    devtool:'inline-source-map'
}